<template>
    <div class="flex flex-column">
        <div class="flex py-4">
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">分销订单总量</div>
                        <div class="pt-4 h2 font-weight-600">{{ dealer.user.OrderNum }}</div>
                    </div>
                </div>
            </div>
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">分销总量</div>
                        <div class="pt-4 h2 font-weight-600">{{ dealer.user.DealerLogNum }}</div>
                    </div>
                    <el-button type="primary" @click="goPage('/Dealer/log')">查看详情</el-button>
                </div>
            </div>
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">提现存量总额</div>
                        <div class="pt-4 h2 font-weight-600">￥ {{ dealer.user.WithdrawalPriceStock }}</div>
                    </div>
                    <el-button type="primary" @click="goPage('/Withdrawal/index')">查看详情</el-button>
                </div>
            </div>
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">代理数</div>
                        <div class="pt-4 h2 font-weight-600">{{ dealer.user.DealerPeopleNum }}</div>
                    </div>
                    <el-button type="primary" @click="goPage('/Dealer/personnel')">查看详情</el-button>
                </div>
            </div>
        </div>
        <div class="flex py-4">
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">分销订单总额</div>
                        <div class="pt-4 h2 font-weight-600">￥ {{ dealer.user.OrderPrice }}</div>
                    </div>
                </div>
            </div>
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">分销总额</div>
                        <div class="pt-4 h2 font-weight-600">￥ {{ dealer.user.DealerPrice }}</div>
                    </div>
                </div>
            </div>
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">提现额</div>
                        <div class="pt-4 h2 font-weight-600">￥ {{ dealer.user.WithdrawalPrice }}</div>
                    </div>
                </div>
            </div>
            <div class="flex-1 px-3">
                <div class="bg-white p-6 rounded-6 flex flex-center">
                    <div class="flex-1">
                        <div class="h10">用户增长数</div>
                        <div class="pt-4 h2 font-weight-600">{{ dealer.user.UserNum }}</div>
                    </div>
                    <el-button type="primary" @click="goPage('/User/index')">查看详情</el-button>
                </div>
            </div>
        </div>
        <div class="flex-1 p-3">
            <div class="bg-white rounded-4 p-3" style="width:100%;height:50vh;">
                <div ref="echarts" style="width:100%;height:50vh;"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "dealer",
    data() {
        return {
            search: {
                loading: 'more',
                total: 0,
                last_page: 0,
                per_page: 20,
                page: 1
            },
            dealerLog: [],
            dealer: {
                user: {
                    OrderNum: '--',
                    OrderPrice: '--',
                    DealerLogNum: '--',
                    DealerPrice: '--',
                    WithdrawalPriceStock: '--',
                    WithdrawalPrice: '--',
                    DealerPeopleNum: '--',
                    UserNum: '--',
                },
                config: {
                    apply: 'yes',
                    apply_price: '',
                    apply_refund: '',
                    apply_refund_text: '',
                    level: 0,
                    proportion: 0,
                    proportion_level_1: 0,
                    proportion_level_2: 0,
                    proportion_level_3: 0,
                },
            }
        }
    },
    created() {
        this.getDealer();
        this.$nextTick(() => {
            this.echarts = this.$echarts.init(this.$refs.echarts);
            let option = {
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title: {
                    text: '本站数据(七日)'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            this.echarts.setOption(option);
            let resizeEr;
            window.addEventListener('resize', () => {
                if (resizeEr) {
                    clearTimeout(resizeEr);
                }
                resizeEr = setTimeout(() => {
                    this.echarts.resize({ silent: true });
                }, 300);
            })

        })
    },
    methods: {
        getDealer() {
            this.$http.useGet('app/ycMassage/admin/Dealer/index').then(res => {
                if (res.code === 200) {
                    this.dealer = res.data;
                    this.setEchartsOptions(res.data.echarts);
                }
            })
        },
        setEchartsOptions(data) {
            data.series.map(item => {
                if (item.areaStyle && item.areaStyle.LinearGradient) {
                    item.areaStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, item.areaStyle.LinearGradient);
                }
                return item;
            })

            // 使用刚指定的配置项和数据显示图表。
            this.echarts.setOption(data);
            this.echarts.resize({ silent: true });
        },
        goPage(url) {
            this.$router.push(url);
        }
    }
}
</script>
<style scoped>
    .flex{
        display: flex;
    }
    .flex-center{
        justify-content: center;
        align-items: center;
    }
    .flex-column{
        flex-direction: column;
    }
    .py-4{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .px-3{
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .p-3{
        padding: .75rem;
        box-sizing: border-box;
    }
    .rpund-4{
        border-radius: .25rem;
    }
    .rounded-6{
        border-radius: .375rem;
    }
    .p-6{
        padding: 1.5rem;
    }
    .pt-4{
        padding-top: 1rem;
    }
    .h10{
        font-size: .75rem;
    }
    .h2{
        font-size: 2rem;
    }
    .font-weight-600{
        font-weight: 600;
    }
</style>